<script setup lang="ts">
// 键盘按键
const keyborad = [
  { value: "1" },
  { value: "2" },
  { value: "3" },
  { value: "4" },
  { value: "5" },
  { value: "6" },
  { value: "7" },
  { value: "8" },
  { value: "9" },
  { value: "." },
  { value: "0" },
  { value: "-", label: "删除" },
];

const show = defineModel<boolean>();

const emits = defineEmits<{
  change: [string];
}>();
</script>

<template>
  <view v-if="show" class="absolute bottom-0 left-0 right-0 h-1/2 safe-footer">
    <view
      class="grid items-center grid-cols-3 h-full text-[42px] font-bold overflow-hidden"
    >
      <view
        class="h-full shawdowTop flex-center"
        v-for="item in keyborad"
        @tap="emits('change', item.value)"
        >{{ item.label ?? item.value }}
      </view>
    </view>
  </view>
</template>
